import React, { Component } from 'react'

import Header from '../../components/Header/Header'
import { reqlogin } from '../../http/api'
import { Button, Form, Input, Toast } from "antd-mobile"


export default class login extends Component {
  constructor() {
    super();
    this.state = {
      user: {
        phone: "",
        password: ""
      }
    }
  }
  changeUser(v, key) {
    this.setState({
      user: {
        ...this.state.user,
        [key]: v
      }
    })
  }

  //  登陆
  async login() {
    let res = await reqlogin(this.state.user);
    if (res.data.code === 200) {
      Toast.show({ content: res.data.msg })
    // 存信息
      sessionStorage.setItem("userInfo",JSON.stringify(res.data.list))
      // 跳转到index
      this.props.history.push("/index/home")
    }
  }


  render() {
    let { user } = this.state
    return (
      <div>
        <div>user:{JSON.stringify(user)}</div>
        <Header register title="登陆"></Header>

        <Form layout='horizontal'>
          <Form.Item label='账号' name='phone'>
            <Input placeholder='请输入账号' clearable value={user.phone} onChange={v => this.changeUser(v, "phone")} />
          </Form.Item>
          <Form.Item label='密码' name='password'>
            <Input placeholder='请输入密码' clearable value={user.password} onChange={v => this.changeUser(v, "password")} />
          </Form.Item>
        </Form>
        <Button block shape='rounded' color='primary' onClick={() => this.login()}>
          登陆
        </Button>

      </div>
    )
  }
}
